<template>
    <div class="tab-nav">
        <ul>
            <tab-nav-item
                v-for="(item,index) of navData"
                :key="item.id"
                :item-data="item"
                :nav-len="navData.length"
                :currentIndex="tabIndex"
                :index="index"
                @change-item="changeItem"
            ></tab-nav-item>
        </ul>
    </div>
</template>

<script>
import TabNavItem from './tabNavItem.vue'

export default {
    name: 'tab-nav',
    components: {
        TabNavItem
    },
    props: ['navData', 'tabIndex'],
    methods: {
        changeItem(index) {
            this.$emit('changeItem', index);
        }
    },
    mounted() {
        
    }
}
</script>

<style>
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tab-nav{
    height: 50px;
    border-bottom: 1px solid #454545;
}
</style>
